<template>
    <!-- 选项结果 -->
    <div class="flex align-center mr-1" v-if="mode != 'view'">
        <!-- 圆点 -->
        <div class="w-[8px] h-[8px] rounded-[50%] mr-[6px]" v-if="props.item.raw[props.itemLabelColor]" :style="{
            backgroundColor: props.item.raw[props.itemLabelColor]
        }"></div>
        <!-- 标题 -->
        <div class="text-text--primary text-[14px] leading-[24px]">{{ props.item.raw[props.itemTitle] }}
        </div>
    </div>

    <!-- 查看结果 -->
    <div class="flex align-center mr-1" v-else>
        <!-- 圆点 -->
        <div class="w-[8px] h-[8px] rounded-[50%] mr-[6px]" v-if="props.item[props.itemLabelColor]" :style="{
            backgroundColor: props.item[props.itemLabelColor]
        }"></div>
        <!-- 标题 -->
        <div class="text-text--primary text-[14px] leading-[24px]">{{ props.item[props.itemTitle] }}
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
    mode: {
        type: String,
        default: ''
    },
    item: {
        type: Object
    },
    multiple: {
        type: Boolean
    },
    itemTitle: {
        type: String,
        default: ''
    },
    itemDesc: {
        type: String,
        default: ''
    },
    itemValue: {
        type: String,
        default: ''
    },
    itemLabelColor: {
        type: String,
        default: ''
    }
});
</script>

<style scoped></style>